<template>
  <div>

    <div>
      <el-button type="primary" @click="router.back()">返回主页</el-button>
    </div>

    <div style="font-size: 50px; font-weight: bold;color: red;text-decoration: underline;margin-bottom: 20px">
      我是奶龙
    </div>

    <div style="font-size: 30px">
      {{ a }} {{ b }}
    </div>

    <div style="margin-bottom: 20px">
      {{ data.a }}
      {{ data.b }}
    </div>

    <div style="margin-bottom: 20px">
      <input v-model="data.name">
    </div>

    <div style="margin-bottom: 20px">
      <span style="color: red" v-if="data.name ==='佩奇'">小猪佩奇</span>
      <span style="color: blue" v-if="data.name ==='乔治'">小猪乔治</span>
      <span style="color: hotpink" v-else>小猪奶龙</span>
    </div>

    <div style="display: flex;margin-bottom: 20px">
      <div
          @click="show(item)" v-for="item in data.arr"
          style="width: 300px; height: 300px; text-align:center;line-height:300px; font-size:30px; margin-right:10px ; background-color: green"
      >{{ item }}
      </div>
      <div>
        <select style="width: 100px;height: 20px">
          <option v-for="item in data.fruits">{{ item }}</option>
        </select>
      </div>

    </div>
    <div style="margin-bottom: 20px">
      <button @click="click">点我变奶龙</button>
    </div>

    <div style="margin-bottom: 30px">
      <div :style="data.box"></div>
      <div>
        <img :src="data.img" alt="">
      </div>
    </div>

    <div style="margin: 30px">
      <el-button @click="clickData" :style="{color:'red'}">芝士</el-button>
      <el-button type="primary" plain size="large" circle loading>Primary</el-button>
      <el-button type="success" text>Success</el-button>
      <el-button type="info" color="#626aef" style="color: red">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>

    <div style="margin: 30px">
      <el-icon :size="20" >
        <Edit />
      </el-icon>

      <span style="margin-left: 50px; color: blue ">
        <el-icon  :size="20"  style="top: 4px;color: #5d5dc5;"><View /></el-icon>100
      </span>

      <el-button type="danger" :icon="View" circle />

      <el-input
          v-model="data.a"
          style="width: 240px"
          placeholder="haha"
          :prefix-icon="Search"
      />
    </div>


  </div>
</template>

<script setup>
import {reactive, ref,onMounted} from "vue";
import {Search, View} from "@element-plus/icons-vue";
import router from "@/router/index.js";

const a = ref(1)
const b = ref("我真的是奶龙")
const data = reactive({
  id: router.currentRoute.value.query.id,
  name: router.currentRoute.value.query.name,
  a: 123,
  b: "奶龙真的很骚",
  //name: '佩奇',
  arr: [4, 5, 6],
  fruits: ['苹果', '雪梨', '橘子'],
  box:{
    width:'100px',
    height:'100px',
    backgroundColor:'red'
  },
  img:'https://www.runoob.com/wp-content/uploads/2017/01/vue.png'
})

console.log('获取到传递过来的id=' + data.id)
console.log('获取到传递过来的name=' + data.name)

onMounted(()=>{
  console.log('页面加载完成')
})

const clickData = () => {
  alert("现在是element")
}

const show = (value) => {
  alert(value)
}

const click = () => {
  alert("注入奶龙基因")
}
</script>
